<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-23 14:19:55
 * @FilePath: \wczd-mobile\src\pages\analysis\analysis.vue
-->
<template>
  <div>
    <div id="completeChart" ></div>
    <div id="expireChart" ></div>
    <div class="ztable-list" v-show="statisticsData.complete_num">
    	<div class="ztable">
    		<div class="a1">已整改</div>
    		<div class="a2">{{statisticsData.complete_num}}个</div>
    		<div class="a3">{{statisticsData.complete_bfb+'%'}}</div>
    	</div>
    	<div class="ztable">
    		<div class="a1">未整改</div>
    		<div class="a2">{{statisticsData.total_num - statisticsData.complete_num}}个</div>
    		<div class="a3">{{statisticsData.complete_no_bfb+'%'}}</div>
    	</div>
    	<div class="ztable">
    		<div class="a1">超时整改</div>
    		<div class="a2">{{statisticsData.complete_expire_num}}个</div>
    		<div class="a3">{{statisticsData.expire_bfb+'%'}}</div>
    	</div>
    	<div class="ztable">
    		<div class="a1">按时整改</div>
    		<div class="a2">{{statisticsData.complete_no_expire_num}}个</div>
    		<div class="a3">{{statisticsData.expire_no_bfb+'%'}}</div>
    	</div>
    </div>
  </div>
</template>

<script>
import { statisticsDanger } from "@/api/danger";
let echarts = require('echarts/lib/echarts')
import { GridComponent } from 'echarts/components';
echarts.use([GridComponent]);
import { LegendComponent } from 'echarts/components';
echarts.use([LegendComponent]);
import { PieChart } from 'echarts/charts';
echarts.use([PieChart]);
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'analysis',
  data () {
    return {
			statisticsData: {}
		}
  },
  computed: {},
  mounted () { 
		this.statisticsDanger()
	},
  watch: {},
  methods: {
		statisticsDanger(){
			statisticsDanger().then(res=>{
				this.statisticsData = res.data
				this.statisticsData.complete_bfb = res.data.total_num?this.wh_formatFloat(res.data.complete_num*100.0/res.data.total_num,1):0
				this.statisticsData.complete_no_bfb = res.data.total_num?this.wh_formatFloat((res.data.total_num - res.data.complete_num)*100.0/res.data.total_num,1):0
				let completeData = [{
					name: '已整改',
					value: res.data.complete_num,
					name2: '已整改\n'+res.data.complete_num+'个('+this.statisticsData.complete_bfb+'%)'
				},{
					name: '未整改',
					value: res.data.total_num - res.data.complete_num,
					name2: '未整改\n'+(res.data.total_num - res.data.complete_num)+'个('+this.statisticsData.complete_no_bfb+'%)'
				}]
				this.initCompleteChart(completeData)
				
				this.statisticsData.expire_bfb = res.data.complete_num?this.wh_formatFloat(res.data.complete_expire_num*100.0/res.data.complete_num,1):0
				this.statisticsData.expire_no_bfb = res.data.complete_num?this.wh_formatFloat(res.data.complete_no_expire_num*100.0/res.data.complete_num,1):0
				let expireData = [{
					name: '超时整改',
					value: res.data.complete_expire_num,
					name2: '超时整改\n'+res.data.complete_expire_num+'个('+this.statisticsData.expire_bfb+'%)'
				},{
					name: '按时整改',
					value: res.data.complete_no_expire_num,
					name2: '按时整改\n'+res.data.complete_no_expire_num+'个('+this.statisticsData.expire_no_bfb+'%)'
				}]
				this.initExpireChart(expireData)
			})
		},
		initCompleteChart(seriesData){
			let completeChart = echarts.init(document.getElementById('completeChart'))
			completeChart.setOption({
				title: {
					text: '隐患整改情况',
					left: 'center',
					top: 20,
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					padding: [20,0,0,0],
					orient: 'vertical',
					left: 'left',
					data: ['已整改', '未整改']
				},
				series: [
					{
						type: 'pie',
						radius: '50%',
						label: {
							normal: {
								position: 'inner',
								formatter:function(val){   //让series 中的文字进行换行
								  return val.data.name2;
								},
								// textStyle:{color:'#ffffff'}
							}
						},//扇形区域内显示文字
						data: seriesData,
						color: ['#91cc75','#ee6666'],
						emphasis: {
							itemStyle: {
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			})
		},
		initExpireChart(seriesData){
			let expireChart = echarts.init(document.getElementById('expireChart'))
			expireChart.setOption({
				title: {
					text: '整改超时情况',
					left: 'center',
					top: 20,
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					padding: [20,0,0,0],
					orient: 'vertical',
					left: 'left',
					data: ['超时', '按时']
				},
				series: [
					{
						type: 'pie',
						radius: '50%',
						label: {
							normal: {
								position: 'inner',
								formatter:function(val){   //让series 中的文字进行换行
								  return val.data.name2;
								},
								// textStyle:{color:'#ffffff'}
							}
						},//扇形区域内显示文字
						data: seriesData,
						color: ['#fac858','#73c0de'],
						emphasis: {
							itemStyle: {
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			})
		}
	},
}
</script>

<style scoped lang="scss">
	.firstTopPanel{
	  width: 100%;
	  background: white;
	  background-size: 100% 100%;
		position: fixed;
		background: white;
		top: 0;
		left: 0;
		z-index: 100;
	  .top-block{
	    padding-top: 140upx;
	    padding-bottom: 60upx;
	    display: flex;
	    padding-left: 50upx;
	    align-items: center;
	
	    .back-btn{
	      width: 56upx;
	      height: 56upx;
	    }
	    .title{
	      padding-top: 0;
	      padding-left: 15upx;
				font-size: 40upx;
				font-weight: bold;
	    }
	  }
	}
	.ul-tag{
		display: flex;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;
		.li-tag{
			flex: 1;
			text-align: center;
			padding: 10upx;
			background: white;
			
			&.active{
				background: #009fdf;
				color: white;
			}
		}
	}
	
	.analysis-main{
		padding-top: 360upx;
		
		.analysis-block{
			background: white;
			padding-bottom: 40upx;
		}
	}
	#completeChart,#expireChart{
		width: 600upx;
		height: 600upx;
		margin: auto;
	}
	.ztable{
		display: flex;
		.a1{
			width: 30%;
			position: relative;
			padding-left: 100upx;
		}
		.a2{
			width: 40%;
			text-align: center;
		}
		.a3{
			width: 30%;
			text-align: center;
		}
		
	}
	
	.ztable-list{
		.ztable:nth-child(1) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #91cc75;
		}
		.ztable:nth-child(2) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #ee6666;
		}
		.ztable:nth-child(3) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #fac858;
		}
		.ztable:nth-child(4) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #73c0de;
		}
	}
</style>
